<template>
  <div class="steps">
    <PMNewConfigBack/>
    <el-steps :active="active" finish-status="success" simple style="margin-top: 20px">
      <el-step title="基本信息"/>
      <el-step title="人员配置"/>
      <el-step title="进度配置"/>
    </el-steps>
    <div class="ConfigFormFinally">

      <TopCompent/>
      <MiddleCompent/>
      <BottomCompent/>

    </div>
    <el-row gutter="20">
      <el-col :span="6" style="display: flex">
        <el-button style="margin-top: 12px;flex: 1" type="primary" @click="returnFirst">上一步</el-button>
      </el-col>
      <el-col :span="12"/>
      <el-col :span="6" style="display: flex">
        <el-button style="margin-top: 12px;flex: 1" type="primary" @click="toNext">完成</el-button>
      </el-col>
    </el-row>
  </div>
</template>

<script lang="ts" setup>
import {ref} from 'vue'
import type {FormInstance} from 'element-plus'
import router from '@/router'
import {usePAUserOneStore} from '@/stores/PAUserOne'
import {usePMConfig} from '@/stores/PMConfig'
import {useProgressConfigStore} from '@/stores/ProgressConfig'
import {addProgramApi} from "@/api/Program";


const ProgressConfig = useProgressConfigStore()
const PAUserOneStore = usePAUserOneStore()
const PMConfig = usePMConfig()

const active = ref(3)
const ruleFormRef = ref<FormInstance>()

const toNext = () => {
  let projectInfo = {
    projectId: 0,
    projectLeader: PMConfig.head,
    projectName: PMConfig.name,
    projectStartTime: PMConfig.startDate.getFullYear() + '-' + (PMConfig.startDate.getMonth() + 1) + '-' + PMConfig.startDate.getDate(),
    projectEndTime: PMConfig.endDate.getFullYear() + '-' + (PMConfig.endDate.getMonth() + 1) + '-' + PMConfig.endDate.getDate(),
    projectPeriod: ProgressConfig.tabledata.length,
    projectProgress: 0,
    projectNum: PAUserOneStore.tabledata.length
  }
  let allReality = 0
  let allPlan = 0
  if (PMConfig.projectId == 0) {

  } else {
    projectInfo.projectId = PMConfig.projectId
  }
  for (let i = 0; i < ProgressConfig.tabledata.length; i++) {
    allReality += ProgressConfig.tabledata[i].reality
    allPlan += ProgressConfig.tabledata[i].plan
  }
  projectInfo.projectProgress = Math.round(allReality / allPlan * 100)
  let projectMembers = []
  for (let i = 0; i < PAUserOneStore.tabledata.length; i++) {
    projectMembers.push({
      id: i,
      userId: PAUserOneStore.tabledata[i].id
    })
  }
  let projectSchedules = []
  for (let i = 0; i < ProgressConfig.tabledata.length; i++) {
    projectSchedules.push({
      projectComplete: ProgressConfig.tabledata[i].reality,
      projectPlan: ProgressConfig.tabledata[i].plan,
      projectTime: ProgressConfig.tabledata[i].date
    })
  }
  addProgramApi(projectInfo, projectMembers, projectSchedules).then(res => {
    router.push('/home/programmanagement')
  })
}

const returnFirst = () => {
  router.push('/home/programmanagement/newconfig/3')
}

</script>
<style lang="scss" scoped>
.ConfigFormFinally {
  width: 100%;
  margin: 10px 0;
  height: 600px
}

.el-date-editor.el-input, .el-date-editor.el-input__inner {
  width: 100%;
}

.steps {
  width: 95%;
  margin: auto;

  ::v-deep(.el-step__icon) {
    width: 50px;
    height: 50px;
    font-size: 40px;
  }
}
</style>
